<template>

    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="船舶名称">
                        <el-input v-model="searchForm.name" placeholder="船舶名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" height="460" v-loading="tableDataLoading" :border="true"
            highlight-current-row ref="multipleTableRef" @selection-change="handleSelectionChange"
            :row-key="row => row.id">

            <el-table-column type="selection" width="55" :reserve-selection="true" />

            <el-table-column label="船舶名称" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>

            <el-table-column label="IMO" align="center">
                <template #default="{ row }">
                    {{ row.imo }}
                </template>
            </el-table-column>

            <el-table-column label="MMSI" align="center">
                <template #default="{ row }">
                    {{ row.mmsi }}
                </template>
            </el-table-column>

            <el-table-column label="船东公司" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.shipownerCompany }}
                </template>
            </el-table-column>

            <el-table-column label="船管公司" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.shipmanagementCompany }}
                </template>
            </el-table-column>

            <el-table-column label="创建日期" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { dateFormatter } from '~/utils/common.js'
import { shipList } from "~/api/supply"

// 列表数据
const tableData = ref([])
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)
const multipleTableRef = ref()
// 选择的数据
const selectCheckList = ref([])

// 查询条件
const searchForm = reactive({
    name: null,
    page: currentPage.value,
    size: limit.value,
})

//当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
    //console.log("handleSelectionChange===>",JSON.stringify(val))
    selectCheckList.value = val
    getCheckedShip()
}

// 生命周期
onMounted(async () => {
    //加载表格数据
    await getData()
})

//获取列表数据
async function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    shipList(searchForm)
        .then(res => {
            if (res) {
                tableData.value = res.records
                total.value = res.total
            } else {
                tableData.value = []
                total.value = 0
            }
        })
        .finally(() => {
            tableDataLoading.value = false
        })
}

// 重置搜索框
const resetSearchForm = () => {
    searchForm.name = ""
    getData(1)
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedShip',
])

const getCheckedShip = () => {
    const selectData = selectCheckList
    let returnParams = selectData.value
    emit("getCheckedShip", returnParams)
}
</script>
